<template>
	<view class="list-product">
		<view class="title">
			<view class="inner">关联产品模块</view>
		</view>
		<u-search placeholder="请输入" v-model="keyword" @search="getList" @custom="getList"></u-search>
		<view class="list-select">
			已选择：
			<template v-if="listSelect.length">
				<u-tag v-for="(v, k) in listSelect" :key="k" :text="v.name" closeable :show="true" @close="selectDel(v)" />
			</template>
			<u-tag v-else type="error" text="请选择"></u-tag>
		</view>
		<uni-list v-if="list.length > 0">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox v-for="(v, k) in list" :key="k" v-model="v.checked" shape="circle" :name="v.productId">
					<uni-list-item>
						<view slot="header" class="hd">
							<view class="item-title">{{ v.name }}</view>
							<o-row justify="between">
								<o-col span="8">规格：{{ v.specName }}</o-col>
								<o-col span="8">单位：{{ v.unit }}</o-col>
								<o-col span="8">数量：{{ v.balance }}</o-col>
							</o-row>
						</view>
					</uni-list-item>
				</u-checkbox>
			</u-checkbox-group>
		</uni-list>
		<u-empty v-if="page >= 1 && !list.length" text="数据为空" mode="list"></u-empty>
		<u-loadmore v-else :status="loadStatus" @loadmore="loadmore" />
		<view class="btn">
			<view class="inner">
				<u-button type="primary" @click="selected">选好了</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import oRow from '@/components/oveui-layout/o-row/o-row.vue';
import oCol from '@/components/oveui-layout/o-col/o-col.vue';
export default {
	name: 'listProduct',
	components: { oRow, oCol },
	props: {
		data: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			// 搜索词
			keyword: '',
			// 选中的值
			selectValue: '',
			// 显示选中的列表
			listSelect: [],
			// 第几页
			page: 1,
			// 每页显示数量
			limit: 10,
			// 列表数据
			list: [],
			// 底部加载状态
			loadStatus: 'loadmore',
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		// 获取列表
		async getList() {
			this.loadStatus = 'loading';
			this.selectValue = '';
			let data = {
				page: this.page,
				limit: this.limit,
				search: this.keyword,
				itemOption: this.data.itemOption,
				quotationItemId: this.data.quotationItemId,
			};
			let res = await this.$api.customer.quotation.product(data);
			if (res.code === 200) {
				let list = res.data.list || [];
				list = list.map((v) => {
					v.checked = false;
					return v;
				});

				if (this.page === 1) {
					this.list = list;
				} else {
					this.list.push(...list);
				}

				// list为空，说明没有更多数据了，显示没有更多数据的提示
				if (!list.length) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			}
		},
		// 加载更多
		loadmore() {
			this.page++;
			this.getList();
		},
		// checkboxGroup改变设置值
		checkboxGroupChange(data) {
			this.selectValue = data;
			// 筛选出选中的数据
			this.listSelect = this.list.filter((v) => data.includes(v.productId));
		},
		// 删除以选择的
		selectDel(row) {
			// 处理选中的数据
			let index = this.listSelect.findIndex((v) => v.productId === row.productId);
			this.listSelect.splice(index, 1);

			// 处理列表数据
			let listIndex = this.list.find((v) => v.productId === row.productId);
			listIndex.checked = false;
		},
		// 选好了
		selected() {
			if (!this.selectValue.length) {
				uni.showToast({
					icon: 'none',
					title: '请选择产品',
				});
				return;
			}
			let res = this.list.filter((v) => this.selectValue.includes(v.productId));
			this.$emit('selected', 'product', res);
		},
	},
};
</script>

<style lang="scss" scoped>
.list-product {
	// padding-bottom: 50px;
	.title {
		height: 44px;
		.inner {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 2;
			height: 44px;
			line-height: 44px;
			font-size: 18px;
			text-align: center;
			background: #fff;
		}
	}
	.u-search,
	.uni-list {
		margin: 10px 15px !important;
	}

	.list-select {
		margin: 0 15px;
		.u-tag {
			margin: 5px 10px 5px 0;
		}
	}

	.uni-list /deep/ {
		.uni-list-item {
			font-size: 14px;
		}
		.uni-list-item__container {
			padding: 12px 0;
			.hd {
				flex: 1;
			}
		}
		.uni-list-item__content {
			display: none;
		}
		.u-col {
			padding: 0 !important;
			color: #666;
		}

		.u-checkbox-group {
			display: block;
			.u-checkbox {
				display: flex;
				flex-direction: row-reverse;
				.u-checkbox__label {
					flex: 1;
					margin-left: 0;
				}
			}
		}
	}

	.btn {
		height: 60px;
		.inner {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 20;
			background: #fff;
			padding: 10px 15px;
		}
	}
}
</style>